import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)
import {
    getCookie
} from '@/utils/cookie'
import {
    getPressApi
} from '@/http/http'
// 导入store 
import store from '@/store'

//解决vue-router在3.0版本以上重复点菜单报错的问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}


//公共权限
const routes = [
    {
        path: '/',
        redirect: '/layout'
    },
    {
        path: '/layout',
        name: 'Layout',
        component: () => import('@/views/layout/Layout.vue'),
        children: [
            {
                path: '',
                component: () => import('@/views/home/Home.vue'),
                name: 'Home',
                meta: {
                    title: '首页',
                    icon: 'el-icon-attract'
                }
            }, 
            {
                path: 'user',
                name: 'User',
                component: () => import('@/views/user/User.vue'),
                meta: {
                    title: '用户管理',
                    icon: 'el-icon-coordinate'
                }
            }, 
            {
                path: 'msg', // 信息管理功能
                name: 'Msg',
                component: () => import('@/views/msg/Msg.vue'),
                meta: {
                    title: '信息管理功能',
                    icon: 'el-icon-wallet'
                },
                children: [{
                    path: 'mymsg', //个人信息
                    name: 'Mymsg',
                    component: () => import('@/views/msg/Mymsg.vue'),
                    meta: {
                        title: '个人信息',
                        icon: 'el-icon-set-up'
                    },
                }]
            }
        ]
    },
    {
        path: '/login',
        name: 'Login',
        component: () => import('@/views/Login.vue')
    }
]
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})





router.beforeEach((to, from, next) => {
    let token = getCookie('token')
    // console.log('333', token);

    // 已经登录了
    if (token) {
        // 登录了，访问的是登录页
        if (to.path === '/login') {
            // 直接跳转到首页
            next('/')
        }
        // 登录了，访问的不是登录页 动态添加路由
        else {
            console.log('查看', store.state.routes); //切换用户  没有清空

            // 第一次，store.state.routes里没有值
            if (store.state.routes.length === 0) {
                //用户不同-角色不同--权限不同（菜单）  
                //admin---管理员--导航菜单[审批管理，请假审批，我要请假] 
                //user---普通用户---导航菜单[我要请假]
                let role = localStorage.getItem('role') //获取角色

                // 发送请求，获取不同角色，所对应的导航菜单
                getPressApi({
                    role: role
                }).then((res) => {
                    if (res.code == 200) {
                        res.data.forEach(item => {
                            console.log('添加前的routes', routes);

                            routes[1].children.push({
                                path: item.path,
                                name: item.name,
                                meta: {
                                    title: item.meta.title,
                                    icon: item.meta.icon
                                },
                                component: () => import('@/views/' + item.name)
                            })

                        })
                        console.log('添加后的route', routes);

                        store.dispatch('setRoleAction', routes).then(() => {
                            console.log('动态生成的路由', routes);
                            //在addRoutes()之后第一次访问被添加的路由会白屏，这是因为刚刚addRoutes()就立刻访问被添加的路由，然而此时addRoutes()没有执行结束，因而找不到刚刚被添加的路由导致白屏。因此需要从新访问一次路由才行。
                            router.addRoutes(routes) //动态添加路由
                            next({
                                ...to,
                                replace: true
                            }) //解决动态添加路由白屏问题  bug
                        })
                    }
                })
            } else {
                next() //放行
                console.log('store.state.routes.', store.state.routes);
            }
        }
    }
    // 没登录，
    else {
        //  没登录，访问的不是登录页，直接去登录页
        if (to.path != '/login') {
            next('/login')
        }
        //   没登录，跳转的是登录页,直接放行
        else {
            next()
        }
    }
})

export default router